<%@ page contentType="text/html;charset=UTF-8"  language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图书馆首页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/js.cookie.js"></script>
    <style>
        .body-wrapper{
            background-color: #c6dbf5;
        }
        .panel-left{
            width: 500px;
            height: 100%;
            font-size: 0;
        }
        .panel-right{
            width: 500px;
            height: 100%;
        }
        #login{
            height: 692px;
            width: 1000px;
            display: flex;
            border-radius: 12px;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5%;
            position: center;
        }
        .login-main{
            width: 300px;
            margin: 0 auto;
        }
        .login-icon{
            margin: 100px auto;
        }
        .form-group {
            margin-bottom: 25px;
        }
        * {
            padding:0;
            margin:0;
        }
    </style>
</head>
<body class="body-wrapper">
<%--<c:if test="${!empty error}">--%>
<%--    <script>--%>
<%--        window.location.href="login.html";--%>
<%--    </script>--%>
<%--</c:if>--%>
<div class="panel panel-default" id="login">
    <div class="panel-left">
        <img src="static/img/login-bg.png" />
    </div>
    <div class="panel-right">
        <div class="login-main">
            <div class="login-icon">
                <img src="static/img/logo.png" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="id" placeholder="请输入账号">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="passwd" placeholder="请输入密码">
            </div>
            <div class="checkbox text-left">
                <label>
<%--                    <input type="checkbox" id="remember">记住密码--%>
                </label>
            </div>

            <p style="text-align: right;color: red;position: absolute" id="info"></p><br/>
            <button id="loginButton"  class="btn btn-primary  btn-block">登陆
            </button>
        </div>
    </div>
</div>
    <script>
        $("#id").keyup(
            function () {
                // if(isNaN($("#id").val())){
                //     $("#info").text("提示:账号只能为数字");
                // }
                // else {
                //     $("#info").text("");
                // }
            }
        )
        // 记住登录信息
        function rememberLogin(username, password, checked,role) {
            console.log("set cookie ok");
            Cookies.set('loginStatus', {
                username: username,
                password: password,
                remember: checked,
                role:role,
            }, {expires: 60, path: ''})
        }
        // 若选择记住登录信息，则进入页面时设置登录信息
        function setLoginStatus() {
            var loginStatusText = Cookies.get('loginStatus')
            if (loginStatusText) {
                var loginStatus
                try {
                    loginStatus = JSON.parse(loginStatusText);
                    $('#id').val(loginStatus.username);
                    $('#passwd').val(loginStatus.password);
                    $("#remember").prop('checked',true);
                } catch (__) {}
            }
        }

        // 设置登录信息
        setLoginStatus();
        $("#loginButton").click(function () {
            var username =$("#id").val();
            var passwd=$("#passwd").val();
            var remember=$("#remember").prop('checked');
            if (username === '') {
                $("#info").text("提示:账号不能为空");
            }
            else if( passwd ===''){
                $("#info").text("提示:密码不能为空");
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "api/loginCheck",
                    data: {
                        username:username ,
                        passwd: passwd
                    },
                    dataType: "json",
                    success: function(data) {
                        console.log("data" + data);
                        if (data.stateCode.trim() === "0") {
                            $("#info").text("提示:账号或密码错误！");
                        } else if (data.stateCode.trim() === "1") {
                            rememberLogin(username,passwd,remember,data.data.role);
                            $("#info").text("提示:登陆成功，跳转中...");
                            window.location.href="studentinfo.html?tab=0";
                        } else if (data.stateCode.trim() === "2") {
                            // if(remember){
                                rememberLogin(username,passwd,remember,data.data.role);
                            // }else {
                            //     Cookies.remove('loginStatus');
                            // }
                            $("#info").text("提示:登陆成功，跳转中...");
                            // window.location.href="/reader_main.html";
                            window.location.href="studentinfo.html?tab=0";
                        }
                    }
                });
            }
        })

    </script>
</div>

</body>
</html>
